/**
 * Created by Ysssssss on 2021/5/5.
 */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import {Col, Radio, Row} from "antd";
import ProductChoose from "@components/shoppingMall/design/ProductChoose";
import {moveToNewIndex} from "@utils/arrayHelper";
import ShoppingMallPreviewShareIcon from "@components/shoppingMall/ShoppingMallPreviewShareIcon";

class ProductListModule extends PureComponent {
    static propTypes = {
        productInfo: PropTypes.object,
        index: PropTypes.number,
        onChange: PropTypes.func
    }

    onTargetChange (key, e) {
        const { productInfo, onChange, index } = this.props
        onChange && onChange(index, {
            ...productInfo,
            [key]: e.target.value
        })
    }

    onValueChange (key, value) {
        const { productInfo, onChange, index } = this.props
        onChange && onChange(index, {
            ...productInfo,
            [key]: value,
        })
    }


    render () {
        const { productInfo } = this.props
        return (
            <div className="operation-container ft-clr-d">
                <div className="ft-16 pdb-16 bdb-l">商品</div>
                <Row className="mgt-36">
                    <Col span={6}>样式：</Col>
                    <Col span={18}>
                        <Radio.Group value={productInfo.type}
                                     onChange={this.onTargetChange.bind(this, 'type')}
                        >
                            <Radio value="one-one">单行单列</Radio>
                            <Radio value="one-two" className="mgl-16">单行双列</Radio>
                            <Radio value="one-three" className="mgt-16">单行三列</Radio>
                            <Radio value="one-more" className="mgt-16 mgl-16">单行多列</Radio>
                        </Radio.Group>
                    </Col>
                </Row>
                <Row className="mgt-36">
                    <Col span={6}>商品：</Col>
                    <Col span={18}>
                        <Radio.Group value={productInfo.isSelf}
                                     onChange={this.onTargetChange.bind(this, 'isSelf')}
                        >
                            <Radio value={false}>默认</Radio>
                            <Radio value={true}>自定义</Radio>
                        </Radio.Group>
                    </Col>
                </Row>
                { productInfo.isSelf ? (
                    <div className="mgt-36">
                        <ProductChoose value={productInfo.goods || []} onChange={this.onValueChange.bind(this, 'goods')}/>
                    </div>
                ) : null }
            </div>
        )
    }
}

export default ProductListModule

export class ProductListPreview extends PureComponent {
    static propTypes = {
        productInfo: PropTypes.object,
        onClick: PropTypes.func,
        className: PropTypes.string,
    }

    getDefaultProductList () {
        const { productInfo } = this.props
        const { type } = productInfo
        const defaultProductInfo = {
            picture: '',
            name: '商品名称',
            price_range: '商品价格'
        }
        switch (type) {
            case 'one-one':
                return [defaultProductInfo]
            case 'one-two':
                return new Array(2).fill(defaultProductInfo)
            case 'one-three':
                return new Array(3).fill(defaultProductInfo)
            case 'one-more':
                return new Array(4).fill(defaultProductInfo)
        }
    }

    render () {
        const { onClick, productInfo, className } = this.props
        let productList = productInfo.goods.length ? productInfo.goods : this.getDefaultProductList()

        return (
            <div className={`product-list-preview ${productInfo.type} cur-poi ${className}`} onClick={onClick}>

                { productList.map((prod, index) => (
                    <div className="product-item" key={prod.id || `default_${index}`}>
                        { prod.picture ? (
                            <img className="product-img" src={prod.picture} alt=""/>
                        ) : (
                            <div className="product-img empty-bg" />
                        ) }
                        <div className="product-name">{ prod.name }</div>
                        <div className="product-price">¥{ prod.price_range }</div>
                    </div>
                )) }
            </div>
        )
    }
}